<template>
  <div>
    <!-- 歌手 -->
    <van-cell
      v-for="item in searchMultimatch.artist || []"
      :key="item.id"
      is-link
      center
    >
      <template #icon>
        <van-image
          class="icon"
          height="50"
          width="50"
          :src="item.picUrl"
        />
      </template>
      <template #title>
        <span class="title">
          {{ item.occupation }}:
          {{ item.name }}
          {{ item.alias[0] ? `(${ item.alias[0] })` : '' }}
        </span>
      </template>
    </van-cell>
    <!-- 专辑 -->
    <van-cell
      v-for="item in searchMultimatch.album || []"
      :key="item.id"
      :label="item.artist.name"
      is-link
      center
    >
      <template #icon>
        <van-image
          class="icon"
          height="50"
          width="50"
          :src="item.picUrl"
        />
      </template>
      <template #title>
        <span class="title">
          专辑:
          {{ item.name }}
          {{ item.alias[0] ? `(${ item.alias[0] })` : '' }}
        </span>
      </template>
    </van-cell>
    <!-- 歌单 -->
    <van-cell
      v-for="item in searchMultimatch.playlist || []"
      :key="item.id"
      :label="'by ' + item.creator.nickname"
      is-link
      center
    >
      <template #icon>
        <van-image
          class="icon"
          height="50"
          width="50"
          :src="item.coverImgUrl"
        />
      </template>
      <template #title>
        <span class="title">
          歌单:
          {{ item.name }}
        </span>
      </template>
    </van-cell>

    <!-- 搜索结果 -->
    <song-list :list="list" />
  </div>
</template>

<script>
import eventBus from '@/event-bus';

export default {
  computed: {
    searchMultimatch () {
      return eventBus.searchMultimatch;
    },
    list () {
      return eventBus.searchList.slice(0, 30).map(item => ({
        id: item.id,
        name: item.name, // 歌曲名
        maxBr: item.privilege.downloadMaxbr, // 最大音质
        alias: item.alia[0],
        artists: item.ar,
        albumName: item.al.name,
      }));
    },
  },
}
</script>

<style scoped>
.icon {
  margin-right: 8px;
}
.title {
  flex: 1;
  font-size: 16px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
</style>